<!DOCTYPE html>
<html lang="en">
<head>
    <!--
    @Author 硕鼠
    @Date 2020/4/7 22:53
    @Version 1.0
    @Description 文件说明
  -->
    <meta charset="utf-8">
    <title>面板</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
</head>
<body>
<!--普通面板-->
<div class="layui-card">
    <div class="layui-card-header">普通面板</div>
    <div class="layui-card-body">
        面板内容
    </div>
</div>
<!--折叠面板-->
<div class="layui-collapse" lay-accordion lay-filter = "myPanel">
    <div class="layui-colla-item">
        <h2 class="layui-colla-title">杜甫</h2>
        <div class="layui-colla-content layui-show">内容区域</div>
    </div>
    <div class="layui-colla-item">
        <h2 class="layui-colla-title">李清照</h2>
        <div class="layui-colla-content layui-show">内容区域</div>
    </div>
    <div class="layui-colla-item">
        <h2 class="layui-colla-title">鲁迅</h2>
        <div class="layui-colla-content layui-show">内容区域</div>
    </div>
</div>

<script src="/layui/layui.js"></script>
<script>
    layui.use(['element','jquery'],function(){
        var element = layui.element;
        element.on('collapse(myPanel)', function(data){
            console.log(data.show); //得到当前面板的展开状态，true或者false
            console.log(data.title); //得到当前点击面板的标题区域DOM对象
            console.log(data.content); //得到当前点击面板的内容区域DOM对象
        });
    });
</script>
</body>
</html>

